import React, { Component, PropTypes } from 'react'
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native'
const {height,width} = Dimensions.get('window');

class IconGroup extends Component {

  static propTypes = {
    title: PropTypes.string, // 显示标题\文字
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const {
      items,
    } = this.props;
    return (
      
      <View style={styles.container}>
        {items.map((item, key) => {
          return (
            <TouchableOpacity key={key} onPress={()=>alert('hello')} style={styles.item}>
                  <Image  style={styles.icon} resizeMode='contain'  source={item.icon}/>
                  <Text numberOfLines={1} style={styles.title}>{item.title}</Text>
             </TouchableOpacity>
          )
        })}
      </View>
       
    
    )
  }
}
const styles = StyleSheet.create({
  container:{
    flexWrap:'wrap',
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#fff',
    paddingTop:10,
  },
  item:{
    width: width / 5,
    height: 58,
    alignItems:'center',
    marginBottom:10
  },
  icon: {
	width: 38,
	height: 38,
    marginBottom:5
  },
  title: {
    fontSize: 12,
    color: '#333'
  }
});
export default IconGroup